<template>
	<!-- 我的足迹 -->
	<view>
		<navBar :title="'我的足迹'"></navBar>
		
		<view class="search">
			<view class="input">
				<u-input maxlength="20" placeholder="请输入搜索内容" trim  border-color="#2979ff" v-model="keyword" type="text" :border="true" />
			</view>
			<view class="icon">
				<image src="../../static/search.png" mode="" @click="search"></image>
			</view>
		</view>
		
		<u-subsection :list="list" :current="current" :animation="true" bold active-color="#2979ff"
			@change="changeCurrent">
		</u-subsection>
		
		<view class="more">
			<text @click="toMore">批量管理</text>
		</view>
		
		<!-- 博客足迹 -->
		<userBlog v-show="current === 0" :userBlog="blogFoot" @toBlog="toBlog"></userBlog>
		
		<!-- 视频足迹 -->
		<userVideo v-show="current === 1" :userVideo='videoFoot' @toVideo="toVideo"></userVideo>
		
		<u-toast ref="uToast" />
		
		<u-loadmore :load-text="loadText" margin-bottom="40" :status="status" @loadmore="nomore"/>
		
	</view>
</template>

<script>
	import {
		getUserBlogFoot,
		getUserVideoFoot,
		searchBlogFoot,
		searchVideoFoot
	} from '../../utils/user.js'

	export default {
		data() {
			return {
				//用户id
				user_id: '',
				list: [{
						name: '博客足迹'
					},
					{
						name: '视频足迹'
					}
				],
				//搜索的关键词
				keyword:'',
				//请求的页数
				pageNum:1,
				pageSize:6,
				current: 0,
				//博客足迹
				blogFoot:[],
				//视频足迹
				videoFoot:[],
				//加载的状态
				status:'loadmore',
				//改变加载更多的文字
				loadText: {
					loadmore: '点击加载更多内容',
					loading: '正在加载,请喝杯奶茶',
					nomore: '没有更多了'
				},
				searchPageNum: 1,
				searchPageSize: 7
			};
		},
		watch: {
			async keyword(newVal) {
				if (newVal === '') {
					this.status = 'loadmore'
					this.pageNum = 1
					if (this.current === 0) {
						let result = await getUserBlogFoot(this.user_id, this.pageNum, this.pageSize)
						if (result.code === 200) {
							this.blogFoot = result.data
						}
					} else {
						let result = await getUserVideoFoot(this.user_id, this.pageNum, this.pageSize)
						if (result.code === 200) {
							this.videoFoot = result.data
						}
					}	
				}
			}
		},
		methods: {
			//提示没有更多了
			nomore() {
				this.$refs.uToast.show({
					title: '没有更多了',
					type: 'success',
					duration:1000
				})
				this.status = 'nomore'
			},
			//获取用户足迹数据
			async getFoot(id) {
				this.searchPageNum = 1
				if (this.current === 0) {
					let result = await getUserBlogFoot(this.user_id,this.pageNum,this.pageSize)
					if (result.code === 200) {
						this.blogFoot = [...this.blogFoot,...result.data]
						this.status = 'loadmore'
						if(result.data.length === 0){
							this.status = 'nomore'
						}
					}
				} else {
					let result = await getUserVideoFoot(this.user_id,this.pageNum,this.pageSize)
					if (result.code === 200) {
						this.videoFoot = [...this.videoFoot,...result.data]
						
						this.status = 'loadmore'
						if(result.data.length === 0){
							this.status = 'nomore'
						}
					}
				}
			},
			//改变足迹项
			async changeCurrent(index) {
				this.pageNum = 1
				this.current = index
				if(this.current === 0){
					let result = await getUserBlogFoot(this.user_id,this.pageNum,this.pageSize)
					if (result.code === 200) {
						this.blogFoot = result.data
					}
				}else{
					let result = await getUserVideoFoot(this.user_id,this.pageNum,this.pageSize)
					if (result.code === 200) {
						this.videoFoot = result.data
					}
				}
				this.searchPageNum = 1
				this.status = 'loadmore'
				this.keyword = ''
			},
			//点击去批量管理
			toMore(){
				let type = this.current === 0 ? 'blog' : 'video'
				uni.navigateTo({
					url:`/subpkg/batch/batch?type=${type}&typeNum=${0}`
				})
			},
			//搜索
			async search(){
				if (this.keyword === '') {
					return
				}
				if (this.searchPageNum === 1) {
					this.blogFoot = []
					this.videoFoot = []
				}
				this.pageNum = 1
				if(this.current === 0){
					let result = await searchBlogFoot(this.user_id,this.keyword,this.searchPageNum,this.searchPageSize)
					if(result.code === 200){
						this.blogFoot = [this.blogFoot,...result.data]
						this.blogFoot.splice(0,1)
						this.status = 'loadmore'
						if (result.code === 200) {
							this.status = 'nomore'
						}
					}
				}
				else{
					let result = await searchVideoFoot(this.user_id,this.keyword,this.searchPageNum,this.searchPageSize)
					if(result.code === 200){
						this.videoFoot = [this.videoFoot,...result.data]
						this.videoFoot.splice(0,1)
						this.status = 'loadmore'
						if (result.code === 200) {
							this.status = 'nomore'
						}
					}
				}
			},
			//去博客详情
			toBlog(id){
				uni.navigateTo({
					url:`/subpkg/blogDetail/blogDetail?blog_id=${id}`
				})
			},
			//去视频详情
			toVideo(id){
				uni.navigateTo({
					url:`/subpkg/videoDetail/videoDetail?id=${id}`
				})
			}
		},
		//下拉拉到底的时候触发的方法
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			} else {
				this.pageNum++
				this.status = 'loading'
				setTimeout(() => {
					if (this.keyword === '') {
						this.getFoot()
					} else {
						this.search()
					}					
				}, 500)
			}
		},
		onLoad() {
			this.user_id = uni.getStorageSync('userInfo').user_id
			this.getFoot()
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		padding: 30rpx 0;
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: row-reverse;
		color: #2979FF;
		font-size: 30rpx;
		font-weight: bold;
	}
	.search{
		width: 90%;
		margin: 0 auto;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		
		.input{
			width: 90%;
		}
		.icon{
			width: 10%;
			padding-left: 25rpx;
			
			image{
				width: 100%;
				height: 45rpx;
				
			}
		}
	}
	// .blogList {
	// 	width: 90%;
	// 	margin: 0 auto;
	
	// 	.blogList-item {
	// 		width: 100%;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		margin-bottom: 40rpx;
	
	
	// 		.blogList-item-img {
	// 			flex: 5;
	// 			padding-right: 20rpx;
	
	
	// 			/deep/image {
	// 				width: 100%;
	// 				height: 100rpx;
	// 			}
	// 		}
	
	// 		.blogList-item-text {
	// 			flex: 5;
	// 			display: flex;	
	// 			flex-direction: column;
	// 			justify-content: space-between;
				
	
	// 			.one {
	// 				font-weight: bold;
	// 				font-size: 34rpx;
	// 			}
				
	// 			.two{
	// 				color: #606266;
	// 			}
	// 		}
	// 	}
	// }
	/deep/.u-lazy-load-image{height: 200rpx;}
</style>
